<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="text/javascript">
// you should input dbname, apikey, first.
var gobj = {
    dbname:"",
    collectionname:"events",
    settingcollectionname:"settings",
    apikey:""
};
</script>
<script type="text/javascript">
(function(){
function ctagf(ptag, pwin)
{
    var ldocument = pwin ? pwin.document : document;
    function randid(){return "a" + (new Date()).getTime().toString() + Math.random().toString().slice(-5);}
    return function(pattr, pstyle)
    {
        var ret = ldocument.createElement(ptag);
        ret.setAttribute("id", randid());
        if(pattr){for(var pn in pattr){ret.setAttribute(pn, pattr[pn]);}}
        if(pstyle){for(var pn in pstyle){ret.style[pn] = pstyle[pn];}}
        return ret;
    };
}
function cgettagf(ptag, pwin)
{
    var ldocument = pwin ? pwin.document : document;
    function range(n,s){var s = []; for(var i = 0; i < n; i++){r[r.length] = i + (s ? s : 0);} return r;}
    return function(pattr, pstyle)
    {
        var templ = ldocument.getElementsByTagName(ptag), myarr = range(templ.length).map(function(i){return templ[i];});
        function attrf(item){for(var pn in pattr){if(item.getAttribute(pn) != pattr[pn]){return false;}} return true;}
        myarr = pattr ? myarr.filter(attrf) : myarr;
        function stylef(item){for(var pn in pstyle){if(item.style[pn] != pstyle[pn]){return false;}} return true;}
        myarr = pstyle ? myarr.filter(stylef) : myarr;
        return myarr;
    }
}
function cgetf(pwin)
{
    var ldocument = pwin ? pwin.document : document;
    return function(pid){return ldocument.getElementById(pid);};
}
function createtag(pwin)
{
    var ret = {};
    var mytags = ["input","textarea","div","img","a","iframe","meta","select","canvas","hr","br","progress","datalist"];
    var svgtags = ["svg","circle","text","polygon","g","path"];
    var tablelayouts = ["table","tr","td","caption","tbody"];
    var headlines = [1,2,3,4,5,6].map(function(n){return "h" + n.toString();});
    mytags = mytags.concat(headlines).concat(tablelayouts).concat(svgtags);
    mytags.map(function(n){ret[n] = ctagf(n, pwin);});
    mytags.map(function(n){ret["get"+n] = cgettagf(n, pwin);});
    ret.get = cgetf(pwin);
    ret.clone = createtag;
    return ret;
}
window.Tags = createtag();
})();
</script>
<script type="text/javascript">
var colordef = {alizarin:"rgb(231,76,60)", greensea:"rgb(22,160,133)",belizehole:"rgb(41,128,185)",asbestos:"rgb(127,140,141)"};
var weekcolor = [colordef.alizarin, colordef.greensea, colordef.greensea, colordef.greensea, colordef.greensea, colordef.greensea, colordef.belizehole];
function range(n,s){var r = []; for(var i = 0; i < n; i++){r[r.length] = i + (s ? s : 0);} return r;}
function c_sprs(l){return function(v,c){var lc = c ? c : "0", r = ""; for(var i = 0; i < l-1; i++){r += lc;} return (r + v.toString()).slice(0-l);};}
function pickdate(parea, callback, pdate)
{
    var ldate = pdate ? pdate :(new Date()), firstday = new Date(ldate.getFullYear(), ldate.getMonth(), 1, 0,0,0);
    var dfday = new Date(firstday.getFullYear(), firstday.getMonth(), firstday.getDate() - firstday.getDay(), 0,0,0);
    var days = range(42).map(function(i){return new Date(dfday.getFullYear(), dfday.getMonth(), dfday.getDate()+i, 0,0,0);});
    parea.innerHTML = "";
    var t = parea.appendChild(Tags.table({width:"100%"}));
    var sprs2 = c_sprs(2), sprs4 = c_sprs(4), r = t.appendChild(Tags.tr());
    var prevmonth = new Date(firstday.getFullYear(), firstday.getMonth()-1, firstday.getDate(), 0,0,0);
    var nextmonth = new Date(firstday.getFullYear(), firstday.getMonth()+1, firstday.getDate(), 0,0,0);
    var buttstyle = {width:"100%",background:"rgba(0,0,0,0)",borderStyle:"dotted",borderWidth:"1px",color:colordef.asbestos};
    var prevbutt = r.appendChild(Tags.td({colspan:2})).appendChild(Tags.input({type:"button",value:sprs4(prevmonth.getFullYear())+sprs2(prevmonth.getMonth()+1)}, buttstyle));
    r.appendChild(Tags.td({colspan:3,align:"center"})).innerText = sprs4(firstday.getFullYear())+sprs2(firstday.getMonth()+1);
    var nextbutt = r.appendChild(Tags.td({colspan:2})).appendChild(Tags.input({type:"button",value:sprs4(nextmonth.getFullYear())+sprs2(nextmonth.getMonth()+1)}, buttstyle));
    var ci = 0;
    days.map(function(day)
    {
        if(ci++ % 7 == 0){r = t.appendChild(Tags.tr());}
        var mycolor = weekcolor[day.getDay()];
        mycolor = day.getFullYear() == firstday.getFullYear() && day.getMonth() == firstday.getMonth() ? mycolor : colordef.asbestos;
        var bstyle = {width:"100%",height:"100%",background:"rgba(0,0,0,0)",borderStyle:"solid",borderWidth:"1px",color:mycolor};
        var butt = r.appendChild(Tags.td({width:Math.floor(1/7*100).toString()+"%",height:50})).appendChild(Tags.input({type:"button",value:day.getDate()}, bstyle));
        butt.addEventListener("click", function(){callback(day);});
    });
    prevbutt.addEventListener("click", function(){setTimeout(function(){pickdate(parea, callback, prevmonth);}, 1);});
    nextbutt.addEventListener("click", function(){setTimeout(function(){pickdate(parea, callback, nextmonth);}, 1);});
}
</script>
<script type="text/javascript">
var g_baseurl = "https://api.mlab.com/api/1";
function c_xhr(method)
{
    return function(url,callback,dat)
    {
        var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function()
        {
            if(xhr.readyState != 4){return;} callback(xhr.status, JSON.parse(xhr.responseText));
        }; xhr.open(method, url, true);
        var datstr = dat ? JSON.stringify(dat) : null;
        if(datstr){xhr.setRequestHeader("Content-Type", "application/json");}
        xhr.send(datstr);
    };
}
function c_getdocuments(apikey, dbname, collname)
{
    function genurl(){return g_baseurl + "/databases/" + dbname + "/collections/" + collname + "?apiKey=" + apikey;}
    return function(callback){c_xhr("GET")(genurl(),callback);};
}
function c_postdocument(apikey, dbname, collname)
{
    function genurl(){return g_baseurl + "/databases/" + dbname + "/collections/" + collname + "?apiKey=" + apikey;}
    return function(pobj, callback){c_xhr("POST")(genurl(), callback, pobj);};
}
function c_updatedocument(apikey, dbname, collname)
{
    function genurl(pid){return g_baseurl + "/databases/" + dbname + "/collections/" + collname + "/" + pid + "?apiKey=" + apikey;}
    return function(pid,pobj, callback){c_xhr("PUT")(genurl(pid), callback, pobj);};
}
function c_removedocument(apikey,dbname,collname)
{
    function genurl(pid){return g_baseurl + "/databases/" + dbname + "/collections/" + collname + "/" + pid + "?apiKey=" + apikey;}
    return function(pid, callback){c_xhr("DELETE")(genurl(pid),callback);}
}
function randid(){return "A" + (new Date()).getTime().toString() + Math.random().toString(36);}

var getdocuments = c_getdocuments(gobj.apikey, gobj.dbname, gobj.collectionname);
var postdocument = c_postdocument(gobj.apikey, gobj.dbname, gobj.collectionname);
var removedocument = c_removedocument(gobj.apikey, gobj.dbname, gobj.collectionname);
var updatedocument = c_updatedocument(gobj.apikey, gobj.dbname, gobj.collectionname);
var getsettings = c_getdocuments(gobj.apikey, gobj.dbname, gobj.settingcollectionname);
var postsetting = c_postdocument(gobj.apikey, gobj.dbname, gobj.settingcollectionname);
var updatesetting = c_updatedocument(gobj.apikey, gobj.dbname, gobj.settingcollectionname);
var removesetting = c_removedocument(gobj.apikey, gobj.dbname, gobj.settingcollectionname);
function upsertdocument(pobj, callback)
{
    var bposting = !("_id" in pobj);
    if(bposting){pobj._id = randid(); postdocument(pobj,callback);}else{var myid = pobj._id; delete pobj._id; updatedocument(myid, pobj, callback);}
}
function upsertsetting(pobj, callback)
{
    var bposting = !("_id" in pobj);
    if(bposting){pobj._id = randid(); postsetting(pobj, callback);}else{var myid = pobj._id; delete pobj._id; updatesetting(myid, pobj, callback);}
}
window.addEventListener("load",onl);
function onl()
{
    //postdocument({_id:randid(), title:"asdf"});
    document.body.style.fontFamily = "sans-serif";
    if(gobj.dbname == "" || gobj.apikey == ""){alert("edit dbname and apikey first."); return;}
    getsettings(function(stat, settingitems)
    {
        var users = settingitems.filter(function(myset){return myset.type == "user";}).sort(function(a,b){return a.name > b.name ? 1 : -1;});
        gobj.settings = users;
        getdocuments(reflect);
    });
}
function getspan(days,sday)
{
    var today = new Date();
    sday = sday ? sday : (new Date(today.getFullYear(), today.getMonth(), today.getDate()-today.getDay(),0,0,0));
    var eday = new Date(sday.getFullYear(), sday.getMonth(), sday.getDate()+days-1,23,59,59);
    return {sday:sday, eday:eday};
}
function c_filterweeks(myspan)
{
    return function(item)
    {
        return item.start <= myspan.eday.getTime() && item.end >= myspan.sday.getTime();
    };
}
function reflect(stat, items)
{
    var daycount = 21, myspan = getspan(daycount), filterf = c_filterweeks(myspan), sortf = function(a,b){return a.start - b.start;};
    var events = items.filter(filterf).sort(sortf);
    var days = range(daycount).map(function(i){return new Date(myspan.sday.getFullYear(),myspan.sday.getMonth(),myspan.sday.getDate()+i,0,0,0); });
    var weekr = document.body.appendChild(Tags.table({width:"100%"},{zIndex:1,position:"fixed",top:"50px",left:0})).appendChild(Tags.tr());
    weekr.appendChild(Tags.td({width:"5%"}));
    var wcr = weekr.appendChild(Tags.td({width:"90%"})).appendChild(Tags.table({width:"100%"})).appendChild(Tags.tr());
    range(7).map(function(i)
    {
        wcr.appendChild(Tags.td({width:Math.floor(1/7*100).toString()+"%",height:window.innerHeight*3},{borderLeftStyle:(i == 0 ? "dotted" : "none"),borderRightStyle:"dotted",borderWidth:"1px",borderColor:colordef.asbestos}));
    });

    weekr.appendChild(Tags.td({width:"5%"}));
    var gt = document.body.appendChild(Tags.table({width:"100%"},{zIndex:1,position:"absolute",top:0,left:0}));
    var gr = gt.appendChild(Tags.tr());
    gr.appendChild(Tags.td({width:"5%"}));
    var t = gr.appendChild(Tags.td({width:"90%"})).appendChild(Tags.table({width:"100%"}));
    gr.appendChild(Tags.td({width:"5%"}));
    var r = t.appendChild(Tags.tr());
    var plusbutt = r.appendChild(Tags.td({colspan:14,height:50})).appendChild(Tags.input({type:"button",value:"+"},{width:"100%",height:"100%",borderStyle:"solid",color:colordef.asbestos,background:"rgba(0,0,0,0)",borderWidth:"1px",borderColor:colordef.asbestos}));
    plusbutt.addEventListener("click", function(){displayeditor();});
    var r = t.appendChild(Tags.tr());
    var cr = r.appendChild(Tags.td({colspan:14})).appendChild(Tags.table({width:"100%"},{background:"white"})).appendChild(Tags.tr());
    var myusers = gobj.settings.filter(function(myset){return myset.type == "user";});
    myusers.map(function(puser)
    {
        cr.appendChild(Tags.td({width:Math.floor(1/(myusers.length+1)*100).toString()+"%",align:"center"},{background:puser.color,color:"white",fontSize:"12px"})).innerText = puser.name;
    });
    var settingsbutt = cr.appendChild(Tags.td({width:Math.floor(1/(myusers.length+1)*100).toString()+"%"})).appendChild(Tags.input({type:"button",value:"settings"},{width:"100%",borderStyle:"solid",borderWidth:"1px",borderColor:colordef.asbestos,color:colordef.asbestos,background:"white"}));
    settingsbutt.addEventListener("click", function(){displaysettings();});
    var ci = 0, r = null;
    days.map(function(day)
    {
        if(ci++ % 7 == 0){r = t.appendChild(Tags.tr());}
        var d = r.appendChild(Tags.td({colspan:2,width:Math.floor(1/7*100).toString()+"%",align:"center"},{coloar:"white",background:"white",color:weekcolor[day.getDay()],borderStyle:"solid",borderWidth:"1px",fontSize:"12px"}));
        d.innerText = (day.getMonth()+1).toString() + "/" + day.getDate();
        if(ci % 7 == 0)
        {
            try{
            genweekr(t, new Date(day.getFullYear(), day.getMonth(), day.getDate()-6,0,0,0), items);
        }catch(e){alert(e.message);}
        }
    });
}
function genweekr(tbl,sday,events)
{
    var filterf = c_filterweeks(getspan(7, sday)), sortf = function(a,b){return a.start - b.start;};
    var myevents = events.filter(filterf).sort(sortf).map(function(evt){if(!("user" in evt)){evt.user = "none";} return evt;});
    var usersobj = {};
    var userdefs = gobj.settings.filter(function(myset){return myset.type == "user";});
    userdefs.map(function(myset){if(!(myset.name in usersobj)){usersobj[myset.name] = [];}});
    myevents.map(function(evt)
    {
        if(!(evt.user in usersobj)){usersobj[evt.user] = [];}
        usersobj[evt.user][usersobj[evt.user].length] = evt;
    });
    function initdays()
    {
        var tempdays = range(7).map(function(i){return new Date(sday.getFullYear(), sday.getMonth(), sday.getDate()+i, 0,0,0);}).map(function(day){return {day:day,isavailable:true};});
        var rdays = [];
        tempdays.map(function(tday)
        {
            rdays[rdays.length] = tday;
            rdays[rdays.length] = {day:new Date(tday.day.getFullYear(), tday.day.getMonth(), tday.day.getDate(), 13,0,0), isavailable:true};
        });
        return rdays;
    }
    for(var pn in usersobj)
    {
        var userr = null;
        var tempusers = userdefs.filter(function(u){return u.name == pn;}), tempuser = tempusers.length == 1 ? tempusers[0] : {name:pn,color:colordef.asbestos};
        (function tempf(remainingarr)
        {
            if(remainingarr.length == 0){return;}
            userr = tbl.appendChild(Tags.tr());
            var tempdays = initdays();
            var nextremaining = [];
            for(var i = 0; i < remainingarr.length; i++)
            {
                var myevt = remainingarr[i];
                var cand = tempdays.filter(function(tempd){var mytime = tempd.day.getTime(); return mytime >= myevt.start && mytime <= myevt.end;});
                if(cand.filter(function(tempd){return !tempd.isavailable;}).length == 0)
                {
                    tempdays.filter(function(tempd){var mytime = tempd.day.getTime(); return mytime < myevt.start && tempd.isavailable;}).map(function(tempd)
                    {
                        tempd.isavailable = false;
                        userr.appendChild(Tags.td({width:Math.floor(1/14*100).toString()+"%"})).innerText = " ";
                        //userr.appendChild(Tags.td({width:Math.floor(1/14*100).toString()+"%"})).appendChild(Tags.input({type:"button",value:""},{width:"100%",background:"rgba(0,0,0,0)",color:"rgba(0,0,0,0)",borderStyle:"solid",borderWidth:"1px"}));
                    });
                    var butt = userr.appendChild(Tags.td({colspan:cand.length, height:40,width:Math.floor(1/14*100*cand.length).toString()+"%"})).appendChild(Tags.input({type:"button",value:myevt.title},{width:"100%",height:"100%",borderStyle:"solid",borderWidth:"1px",color:tempuser.color,background:"white",borderColor:tempuser.color,fontSize:"10px"}));
                    function c_disp(evt){return function(){displayeditor(evt);};}
                    butt.addEventListener("click", c_disp(myevt));
                    cand.map(function(tempd){tempd.isavailable = false;});
                }else{nextremaining[nextremaining.length] = myevt;}
            }
            tempdays.filter(function(tempd){return tempd.isavailable;}).map(function(tempd)
            {
                userr.appendChild(Tags.td({width:Math.floor(1/14*100).toString()+"%"})).innerText = " ";
            });
            tempf(nextremaining);
            //setTimeout(function(){tempf(nextremaining);}, 1);
        })(usersobj[pn]);
    }
}
function displayeditor(pobj)
{
    var orgx = window.pageXOffset, orgy = window.pageYOffset;
    scrollTo(1,1);
    //function formatdate(pdt){return [c_sprs(4)(pdt.getFullYear()),c_sprs(2)(pdt.getMonth()+1),c_sprs(2)(pdt.getDate())].join("-");}
    function formatdate(pdt){var sp4 = c_sprs(4), sp2 = c_sprs(2); return [[sp4(pdt.getFullYear()), sp2(pdt.getMonth()+1), sp2(pdt.getDate())].join("-"), [sp2(pdt.getHours()), sp2(pdt.getMinutes())].join(":")].join(" "); }
    var canv = document.body.appendChild(Tags.canvas({width:"100%",height:"100%"},{zIndex:1,position:"fixed",top:0,left:0,background:"white",width:"100%",height:"100%"}));
    var gt = document.body.appendChild(Tags.table({width:"100%"},{zIndex:1,position:"absolute",top:"3%",left:0}));
    function closef(){[canv,gt].map(function(ele){try{ele.parentNode.removeChild(ele);}catch(e){}}); scrollTo(orgx,orgy);}
    var gr = gt.appendChild(Tags.tr());
    gr.appendChild(Tags.td({width:"10%"}));
    var t = gr.appendChild(Tags.td({width:"80%"})).appendChild(Tags.table({width:"100%"}));
    gr.appendChild(Tags.td({width:"10%"}));
    t.appendChild(Tags.tr()).appendChild(Tags.td({colspan:3})).innerText = "NAME";
    var dlid = randid();
    var dl = t.appendChild(Tags.tr({},{display:"none"})).appendChild(Tags.td()).appendChild(Tags.datalist({id:dlid}));
    gobj.settings.filter(function(myset){return myset.type == "user";}).map(function(myu){dl.appendChild(new Option(myu.name, myu.name));});
    var userbox = t.appendChild(Tags.tr()).appendChild(Tags.td()).appendChild(Tags.input({list:dlid}));
    userbox.value = pobj && pobj.user ? pobj.user : "";
    t.appendChild(Tags.tr()).appendChild(Tags.td({colspan:3})).innerText = "START";
    var cv = pobj ? new Date(parseInt(pobj.start,10)) : new Date();
    cv = new Date(cv.getFullYear(), cv.getMonth(), cv.getDate(), 0,0,0);
    var boxstyle = {width:"100%",borderStyle:"solid",borderWidth:"1px"};
    var startdtboxr = t.appendChild(Tags.tr());
    var startdtbox = startdtboxr.appendChild(Tags.td()).appendChild(Tags.input({cv:cv.getTime(),value:formatdate(cv)}, boxstyle));
    var ampm = cv.getHours() < 13 ? "AM" : "PM";
    var startdtampm = startdtboxr.appendChild(Tags.td()).appendChild(Tags.input({type:"button",value:ampm}));
    var startdteditr = t.appendChild(Tags.tr({},{display:"none"}));
    t.appendChild(Tags.tr()).appendChild(Tags.td({colspan:3})).innerText = "END";
    var cv = pobj ? new Date(parseInt(pobj.end, 10)) : new Date();
    var enddtboxr = t.appendChild(Tags.tr());
    var enddtbox = enddtboxr.appendChild(Tags.td()).appendChild(Tags.input({cv:cv.getTime(),value:formatdate(cv)}, boxstyle));
    var ampm = cv.getHours() < 13 ? "AM" : "PM";
    var enddtampm = enddtboxr.appendChild(Tags.td()).appendChild(Tags.input({type:"button",value:ampm}));
    [startdtampm,enddtampm].map(function(ampm){ampm.addEventListener("click", function(){this.value = this.value == "AM" ? "PM" : "AM";});});
    var enddteditr = t.appendChild(Tags.tr({},{display:"none"}));
    t.appendChild(Tags.tr()).appendChild(Tags.td({colspan:3})).innerText = "SUBJECT";
    var subjectbox = t.appendChild(Tags.tr()).appendChild(Tags.td({colspan:3})).appendChild(Tags.input({},boxstyle));
    subjectbox.value = pobj ? pobj.title : "";
    [{box:startdtbox, boxr:startdtboxr, editr:startdteditr},{box:enddtbox,boxr:enddtboxr,editr:enddteditr}].map(function(tempset)
    {
        tempset.box.addEventListener("focus", function()
        {
            try{
            tempset.boxr.style.display = "none";
            tempset.editr.style.display = "";
            tempset.editr.innerHTML = "";
            var currentdt = new Date(parseInt(this.getAttribute("cv"),10));
            pickdate(tempset.editr.appendChild(Tags.td({colspan:3})), function(ndt)
            {
                tempset.box.setAttribute("cv", ndt.getTime());
                tempset.box.value = formatdate(ndt);
                tempset.boxr.style.display = "";
                tempset.editr.style.display = "none";
            }, currentdt);
        }catch(e){alert(e.message);}
        });
    });
    var r = t.appendChild(Tags.tr()), bstyle = {width:"100%",height:"100%",borderStyle:"solid",borderWidth:"1px",background:"rgba(0,0,0,0)"};
    var cw = pobj ? "33%" : "50%";
    r.appendChild(Tags.td({width:cw,height:50})).appendChild(Tags.input({type:"button",value:"SAVE"}, bstyle)).addEventListener("click", function()
    {
        var ngboxes = [subjectbox, userbox].map(function(box){box.style.borderColor = ""; return box;}).filter(function(box){return box.value == "";}).map(function(box){box.style.borderColor = colordef.alizarin; box.focus(); return box;});
        if(ngboxes.length != 0){return;}
        try{
        var mystart = new Date(parseInt(startdtbox.getAttribute("cv"), 10));
        mystart = new Date(mystart.getFullYear(), mystart.getMonth(), mystart.getDate(), startdtampm.value == "AM" ? 0 : 13, 0,0);
        var myend = new Date(parseInt(enddtbox.getAttribute("cv"), 10)), endisam = enddtampm.value == "AM";
        myend = new Date(myend.getFullYear(), myend.getMonth(), myend.getDate(), endisam ? 12 : 23, 59, 59);
        if(mystart > myend){startdtbox.style.borderColor = colordef.alizarin; enddtbox.style.borderColor = colordef.alizarin; return;}
        var myobj = {start:mystart.getTime(),end:myend.getTime(),title:subjectbox.value, user:userbox.value};
        if(pobj){myobj._id = pobj._id;}
        upsertdocument(myobj,function(er){location.reload();});
    }catch(e){alert(e.message);}
    });
    if(pobj)
    {
        r.appendChild(Tags.td({width:cw,height:50})).appendChild(Tags.input({type:"button",value:"DELETE"},bstyle)).addEventListener("click", function()
        {
            removedocument(pobj._id, function(){location.reload();});
        });
    }
    r.appendChild(Tags.td({width:cw,height:50})).appendChild(Tags.input({type:"button",value:"CANCEL"}, bstyle)).addEventListener("click",closef);
}
function displaysettings()
{
    var canv = document.body.appendChild(Tags.canvas({width:"100%",height:"100%"},{width:"100%",height:"100%",zIndex:1,position:"fixed",top:0,left:0,background:"white"}));
    var gt = document.body.appendChild(Tags.table({width:"100%"},{zIndex:1,position:"absolute",top:"3%",left:0}));
    var closef = function(){[canv,gt].map(function(ele){try{ele.parentNode.removeChild(ele);}catch(e){}});}
    var gr = gt.appendChild(Tags.tr());
    gr.appendChild(Tags.td({width:"5%"}));
    var t = gr.appendChild(Tags.td({width:"90%"})).appendChild(Tags.table({width:"100%"}));
    gr.appendChild(Tags.td({width:"5%"}));
    var d = t.appendChild(Tags.tr()).appendChild(Tags.td({align:"right"}));
    var plusbutt = d.appendChild(Tags.input({type:"button",value:"+"}));
    d.appendChild(Tags.input({type:"button",value:"CANCEL"})).addEventListener("click", closef);
    plusbutt.addEventListener("click", function(){displayusereditor();});
    gobj.settings.filter(function(myset){return myset.type == "user";}).map(function(user)
    {
        var ubutt = t.appendChild(Tags.tr()).appendChild(Tags.td({height:60})).appendChild(Tags.input({type:"button",value:user.name},{width:"100%",height:"100%",color:user.color,borderStyle:"solid",borderWidth:"1px",background:"white"}));
        ubutt.addEventListener("click", function(){displayusereditor(user);});
    });
}
function displayusereditor(puser)
{
    var defcolors = ["rgb(22,160,133)","rgb(41,128,185)","midnightblue","rgb(211,84,0)","rgb(142,68,173)","rgb(192,57,43)","rgb(230,126,34)","rgb(231,76,60)","rgb(243,156,18)"];
    var canv = document.body.appendChild(Tags.canvas({width:"100%",height:"100%"},{width:"100%",height:"100%",zIndex:1,position:"fixed",top:0,left:0,background:"white"}));
    var gt = document.body.appendChild(Tags.table({width:"100%"},{zIndex:1,position:"absolute",top:"3%",left:0}));
    var closef = function(){[canv,gt].map(function(ele){try{ele.parentNode.removeChild(ele);}catch(e){}});}
    var gr = gt.appendChild(Tags.tr());
    gr.appendChild(Tags.td({width:"5%"}));
    var t = gr.appendChild(Tags.td({width:"90%"})).appendChild(Tags.table({width:"100%"}));
    gr.appendChild(Tags.td({width:"5%"}));
    t.appendChild(Tags.tr()).appendChild(Tags.td()).innerText = "NAME";
    var namebox = t.appendChild(Tags.tr()).appendChild(Tags.td()).appendChild(Tags.input({},{width:"100%",borderStyle:"solid",borderWidth:"1px"}));
    t.appendChild(Tags.tr()).appendChild(Tags.td()).innerText = "COLOR";
    var colorboxr = t.appendChild(Tags.tr({}));
    var colorbox = colorboxr.appendChild(Tags.td({height:60})).appendChild(Tags.input({type:"button",value:""},{width:"100%",height:"100%",borderStyle:"solid",borderWidth:"1px"}));
    var coloreditr = t.appendChild(Tags.tr({},{display:"none"}));
    colorbox.addEventListener("click", function(){colorboxr.style.display = "none"; coloreditr.style.display = "";});
    var ct = coloreditr.appendChild(Tags.td()).appendChild(Tags.table({width:"100%"}));
    var cr = null, cmax = 2, ci = 0;
    defcolors.map(function(dcolor)
    {
        if(ci++ % cmax == 0){cr = ct.appendChild(Tags.tr());}
        var cbutt = cr.appendChild(Tags.td({width:Math.floor(1/cmax*100).toString()+"%",height:50})).appendChild(Tags.input({type:"button",value:" ",name:dcolor},{width:"100%",height:"100%",background:dcolor,color:dcolor,borderStyle:"solid",borderWidth:"1px"}));
        cbutt.addEventListener("click", function()
        {
            colorbox.value = this.getAttribute("name");
            colorbox.style.background = colorbox.value;
            colorbox.style.color = colorbox.value;
            coloreditr.style.display = "none";
            colorboxr.style.display = "";
        });
    });
    var cr = t.appendChild(Tags.tr()).appendChild(Tags.td()).appendChild(Tags.table({width:"100%"}));
    var cw = puser ? "33%" : "50%";
    var savebutt = cr.appendChild(Tags.td({width:cw})).appendChild(Tags.input({type:"button",value:"SAVE"},{width:"100%"}));
    if(puser)
    {
        var rembutt = cr.appendChild(Tags.td({width:cw})).appendChild(Tags.input({type:"button",value:"DELETE"},{width:"100%"}));
        rembutt.addEventListener("click", function(){removesetting(puser._id, function(){location.reload();});});
    }
    var cancelbutt = cr.appendChild(Tags.td({width:cw})).appendChild(Tags.input({type:"button",value:"CANCEL"},{width:"100%"}));
    cancelbutt.addEventListener("click", closef);
    savebutt.addEventListener("click", function()
    {
        if(namebox.value == ""){namebox.style.borderColor = colordef.alizarin; namebox.focus(); return;}
        var myobj = {type:"user",name:namebox.value,color:colorbox.value};
        if(puser){myobj._id = puser._id;}
        upsertsetting(myobj, function(){location.reload();});
    });
    if(puser)
    {
        namebox.value = puser.name;
        colorbox.value = puser.color;
        colorbox.style.background = colorbox.value;
        colorbox.style.color = colorbox.value;
    }
}
</script>
</head>
<body></body>
</html>
